<template>
    <div>
        <el-row class="local_date">
            <el-col :span="7">
                <local theme="outline" size="16" fill="#000000" />
                {{ address.province }}{{ address.city }}
            </el-col>
            <el-col :span="5">
                {{ local_weather.high }}℃
                {{ local_weather.type }}
            </el-col>
            <el-col :span="12">
                <calendar theme="outline" size="16" fill="#000000" />
                {{ local_data.dateYear}} {{ local_data.dateWeek }} {{local_data.dateDay}}
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { Local, Calendar } from "@icon-park/vue-next";
import { reactive, ref, getCurrentInstance, watchEffect, onMounted, onBeforeUnmount } from "vue";
import dayjs from 'dayjs'
import {jsonp} from 'vue-jsonp'
const router = useRouter();
const route = useRoute();
const { appContext, proxy } = getCurrentInstance();

const local_weather = reactive({
    data: [],
    type: '',
    high: ''
})
const local_data = reactive({
    dateDay: '',
    dateYear: '',
    dateWeek: '',
    weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    timer:''
})
const address = reactive({
    province: '',
    city: '',
    district:''
})
// 获取实况天气
const getWeather = () => {
    proxy.$http({
        method: "get",
        url: "https://restapi.amap.com/v3/weather/weatherInfo?key=7200004a6b7f7402078b11e7e42c5157&extensions=base&city=" + address.city
    }).then((res) => {
        local_weather.type = res.data.lives[0].weather
        local_weather.high = res.data.lives[0].temperature
        // console.log(res.data.data.yesterday.high.replace(/\D/g, ''));
    })
}
//获取当前ip地理位置
const getAddress = () => {
    jsonp("https://apis.map.qq.com/ws/location/v1/ip", {
        key: "S4ZBZ-XLGKU-PRXVD-2LZYI-SM4UV-6DF5K",
        output: 'jsonp'
    }).then((res) => {
        address.province = res.result.ad_info.province
        address.city = res.result.ad_info.city
        address.district = res.result.ad_info.district
        getWeather()
    })
}

onMounted(() => {
    getAddress()
    local_data.timer = setInterval(() => {
        const date = dayjs(new Date())
        local_data.dateDay = date.format('HH:mm:ss');
        local_data.dateYear = date.format('YYYY-MM-DD');
        local_data.dateWeek = date.format(local_data.weekday[date.day()])
    }, 1000)
})
onBeforeUnmount(() => {
    if (local_data.timer) {
        clearInterval(local_data.timer)
    }
})
</script>

<style scoped>
.local_date{
    width: 440px;
    position: absolute;
    font-size: 16px;
    top: -40px;
    right: 150px;
}

</style>